<template>
  <view class="container">
    <view class="list">
      <u-cell-group>
        <u-cell
          v-for="item in commissionList"
          :key="item.id"
          :title="item.remark"
          :value="`¥${item.amount}`"
        >
          <template #icon>
            <u-icon name="rmb-circle" size="20"></u-icon>
          </template>
          <template #label>
            <text class="time-label">{{ item.created_at }}</text>
          </template>
        </u-cell>
      </u-cell-group>
      <u-empty v-if="commissionList.length === 0"></u-empty>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { agentCommission } from "@/common/apis/agent.js";
import { useStore } from "vuex";

const store = useStore();
const commissionList = ref([]);
const currentPage = ref(1);
const totalPage = ref(1);
const loadStatus = ref("loadmore");
const iconType = ref("circle");
const loadText = ref({
  loadmore: "上拉加载更多",
  loading: "正在加载...",
  nomore: "没有更多了",
});
const currentTab = ref(0);
const tabList = ref([{ name: "全部" }, { name: "收入" }, { name: "支出" }]);
const showDatePicker = ref(false);
const dateRange = ref([]);
const dateRangeText = ref("选择日期");

async function fetchCommissionList() {
  loadStatus.value = "loading";
  try {
    const response = await agentCommission({
      page: currentPage.value,
      status:
        currentTab.value === 0
          ? null
          : currentTab.value === 1
          ? "income"
          : "expense",
      start_date: dateRange.value[0],
      end_date: dateRange.value[1],
    });

    if (currentPage.value === 1) {
      commissionList.value = response.data.records;
    } else {
      commissionList.value.push(...response.data.records);
    }

    totalPage.value = response.data.total_page;
    loadStatus.value =
      response.data.total_page > currentPage.value ? "loadmore" : "nomore";
  } catch (error) {
    console.error(error);
    loadStatus.value = "loadmore";
  }
}

function handleTabChange(index) {
  currentTab.value = index;
  currentPage.value = 1;
  fetchCommissionList();
}

function handleDateConfirm(e) {
  dateRange.value = e;
  dateRangeText.value = `${e[0]} 至 ${e[1]}`;
  showDatePicker.value = false;
  currentPage.value = 1;
  fetchCommissionList();
}

onMounted(() => {
  fetchCommissionList();
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;

  .filter-box {
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;

    .date-picker {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
    }
  }

  .list {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;

    .time-label {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
